// vue3中 createApp方法每执行一次 都会生成一个独立的vue应用实例
// 每一个独立的应用实例 各自拥有自己的作用域 并不会共享全局指令
// 想共享 必须使用main.js中由createApp方法产出的app实例
// 思路  把全局指令的定义携程插件的形式
// 依靠注册插件时的use方法可以拿到main.js中唯一的实例
// 定制图片懒加载指令
// 1.引来默认图片 在图片发生加载错误时使用
import defaultImg from '@/assets/images/200.png'
// 引入监听是否进入视口
import { useIntersectionObserver } from '@vueuse/core'
export default {
  install (app) {
    console.log('全局指令位置要使用main.js', app)
    // app实例参商有全局注册指令方法 调用即可
    app.directive('imgLazy', {
      mounted (el, binding) {
        // el:img dom对象
        // binding.value 图片url地址
        // 使用vueuse/core 提供的监听api 对图片dom进行监听 正式进入视口才加载
        // Image.src = url
        console.log(el, binding)
        const { stop } = useIntersectionObserver(
          // 监听目标元素
          el,
          ([{ isIntersecting }], observeeElement) => {
            // isIntersecting 布尔值 代表当前监听的元素是否进入视口
            console.log('布尔', isIntersecting)
            // 判断 true就发送ajax
            if (isIntersecting) {
            //   // 发送网络请求
            //   apiFn()
              // 当图片无效加载的时候使用默认图片替代
              el.onerror = function () {
                el.src = defaultImg
              }
              el.src = binding.value
              // 请求完毕停止监听
              stop()
            }
          },
          {
            // 一旦进入立刻触发
            threshold: 0
          }
        )
      }
    })
  }
}
